<template>
  <div>
    <el-card class="card-box">
      <div class="card-box--headerwrap">
        <el-page-header content="科研成果导出" @back="goback"></el-page-header>
      </div>
    </el-card>
    <el-card>
      <div class="list-h">
        <i></i>
        <el-form
          :inline="true"
          :model="formInline"
          ref="formRef"
          @submit.prevent
          class="demo-form-inline"
        >
          <el-form-item label="成果名称" prop="kyName">
            <el-input class="width-custom120" v-model="formInline.kyName" />
          </el-form-item>

          <el-form-item label="成果类型" prop="kyTypeCode">
            <el-select
              clearable
              class="width-custom120"
              v-model="formInline.kyTypeCode"
            >
              <el-option
                v-for="item in model.types"
                :label="item.dicValue"
                :key="item.dicCode"
                :value="item.dicCode"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="成果来源" prop="scientificScouce">
            <el-select
              clearable
              class="width-custom120"
              v-model="formInline.scientificScouce"
            >
              <el-option
                v-for="item in model.sources"
                :label="item.dicValue"
                :key="item.dicCode"
                :value="item.dicCode"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="项目" prop="projectManageId">
            <el-select
              class="width-custom120"
              v-model="formInline.projectManageId"
              clearable
              placeholder="请选择"
              value-key="id"
            >
              <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="item.projectName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="创建人" prop="createUserName">
            <el-input
              class="width-custom120"
              v-model="formInline.createUserName"
            />
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              class="width-custom220"
              v-model="model.createTime"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD hh:mm:ss"
              @change="handleChangeDate"
              default-time="00:00:00"
            />
          </el-form-item>

          <el-form-item>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="header-btn">
        <el-button
          type="primary"
          :disabled="!multipleSelection.length"
          @click="handleDownload"
          >导出</el-button
        >
      </div>
      <el-table
        :data="model.tableData"
        @selection-change="handleSelectionChange"
        border
        style="width: 100%"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :row-key="getRowKeys"
      >
        <template #empty>
          <el-empty :image-size="150" description="暂无数据"></el-empty>
        </template>
        <el-table-column
          type="selection"
          :reserve-selection="true"
          width="50"
        ></el-table-column>
        <el-table-column type="index" label="序号">
          <template v-slot="scope">
            <span>{{
              (pageState.pageNum - 1) * pageState.pageSize + scope.$index + 1
            }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="kyNum" label="编号" width="180">
        </el-table-column>
        <el-table-column prop="kyName" label="成果名称"> </el-table-column>

        <el-table-column prop="createUserName" label="创建人" width="100">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="150">
        </el-table-column>
        <el-table-column prop="kyTypeCode" label="成果类型" width="100">
          <template #default="{ row }">
            {{ model.types.find(el => el.dicCode === row.kyTypeCode).dicValue }}
          </template>
        </el-table-column>
        <el-table-column prop="projectPhaseName" label="成果来源" width="100">
          <template #default="{ row }">
            {{ row.projectManageId ? "项目" : "非项目" }}
          </template>
        </el-table-column>
      </el-table>
      <re-pagination
        v-if="model.total > 0"
        :total="model.total"
        v-model:page="pageState.pageNum"
        v-model:limit="pageState.pageSize"
        @pagination="handleChangePage"
      />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
// import { useRouter } from "vue-router";
import { postProjectList } from "/@/api/project";
import { postScientificList } from "/@/api/scientific";
import { postScientificDownload } from "/@/utils/download";
// const router = useRouter();
import { useRouter } from "vue-router";
const router = useRouter();
const formRef = ref<HTMLFormElement | null>(null) as any;
const loading = ref(false);
let projectList = ref([]);
let multipleSelection = ref([]);
const formInline = ref({
  kyName: "",
  kyTypeCode: "",
  scientificScouce: "",
  createUserName: "",
  createTimeStrStart: "",
  createTimeStrEnd: "",
  projectManageId: ""
});

const pageState = reactive({
  pageNum: 1,
  pageSize: 10
});
const model = reactive({
  createTime: "",
  tableData: [],

  total: 0,
  sources: [
    { dicCode: "1", dicValue: "项目" },
    { dicCode: "2", dicValue: "非项目" }
  ],
  types: [
    { dicCode: "0", dicValue: "专利" },
    { dicCode: "1", dicValue: "软件著作权" },
    { dicCode: "2", dicValue: "论文" },
    { dicCode: "3", dicValue: "专著" },
    { dicCode: "4", dicValue: "标准" },
    { dicCode: "5", dicValue: "科技奖励" },
    { dicCode: "6", dicValue: "科技制度建设" },
    { dicCode: "7", dicValue: "合作单位" },
    { dicCode: "8", dicValue: "其他" }
  ]
});

const getRowKeys = row => {
  return row.id;
};

const goback = () => {
  router.push("/document/scientific");
};
// 获取项目信息
const getProjectList = async () => {
  try {
    const { code, data } = await postProjectList({ pageNum: 1, pageSize: 0 });
    if (code === 200) {
      projectList.value = data.list;
    }
  } catch (err) {
    console.log(err);
  }
};

const handleSelectionChange = val => {
  multipleSelection.value = val.map(item => {
    return { id: item.id, projectManageId: item.projectManageId };
  });
};

const handleReset = () => {
  formRef.value.resetFields();
  formRef.value.resetFields();
  formInline.value.createTimeStrStart = "";
  formInline.value.createTimeStrEnd = "";
  model.createTime = "";
};

const handleSearch = () => {
  pageState.pageNum = 1;

  getTableList();
};

const handleDownload = () => {
  postScientificDownload({
    achvIds: multipleSelection.value.map(el => el.id),
    projectIds: multipleSelection.value.map(el => {
      if (el.projectManageId) {
        return el.projectManageId;
      }
    })
  });
};
const handleChangePage = () => {
  getTableList();
};

const handleChangeDate = item => {
  console.log(item, "date");
  if (item) {
    formInline.value.createTimeStrStart = item[0].replace(
      "12:00:00",
      "00:00:00"
    );
    formInline.value.createTimeStrEnd = item[1].replace("12:00:00", "00:00:00");
  } else {
    formInline.value.createTimeStrStart = "";
    formInline.value.createTimeStrEnd = "";
  }
};
const getTableList = async () => {
  try {
    loading.value = true;
    const { code, data } = await postScientificList({
      ...formInline.value,
      ...pageState
    });
    if (code === 200) {
      model.tableData = data.list;
      model.total = data.rows;
    }
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
};

handleSearch();
getProjectList();
</script>
<style scoped lang="scss">
.card-box {
  margin-bottom: 10px;
}
.header-btn {
  margin: 10px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
